import {uEditOrOpenReportConf, uDisableReportConf} from "@/api/setting"
import {IconImg} from "@/components/images"
import {
	Button,
	CommonEventFunction,
	Input,
	Picker,
	Switch,
	SwitchProps,
	View,
	Text,
	OfficialAccount
} from "@tarojs/components"
import Taro from "@tarojs/taro"
import {useEffect, useState} from "react"
import {InputEventDetail} from "taro-ui/types/input"
export const ReportConf: React.FC<{
	title: string
	conf: Setting.ReportConf
	onChange: Function
	subTitle?: JSX.Element
	showOfficialAccounts?: boolean
	isManage?: "是" | "否"
}> = ({isManage, title, conf, onChange, subTitle, showOfficialAccounts}): JSX.Element => {
	/**通知配置的Id */
	const [ConfId, setConfId] = useState<number | undefined>(undefined)

	/**是否开启 */
	const [IsOpen, setIsOpen] = useState(0)

	const handleIsOpenSwitchOnChange: CommonEventFunction<SwitchProps.onChangeEventDetail> = e => {
		if (e.detail.value) {
			ReportOpen()
			if (title == "微信报警") {
			}
		} else {
			ReportClose()
		}
	}

	/**开始时间 */
	const [StartTime, setStartTime] = useState("00:00")
	/**开始时间选择变化时 */
	const handleStartTimePickerOnChange: CommonEventFunction = e => {
		setStartTime(e.detail.value)
	}

	/**结束时间 */
	const [EndTime, setEndTime] = useState("00:00")
	/*结束时间选择变化时 */
	const handleEndTimePickerOnChange: CommonEventFunction = e => {
		setEndTime(e.detail.value)
	}

	/**是否可操作 */
	const [isDisabled, setIsDisabled] = useState(false)

	/**间隔时间 */
	const [IntervalTimes, setIntervalTimes] = useState("2")
	/*间隔时间输入变化时 */
	const handleIntervalTimesInputOnChange: CommonEventFunction<InputEventDetail> = e => {
		setIntervalTimes(e.detail.value.toString())
	}

	/**每天次数 */
	const [DayTimes, setDayTimes] = useState("1")
	/*每天次数输入变化时 */
	const handleDayTimesInputOnChange: CommonEventFunction<InputEventDetail> = e => {
		setDayTimes(e.detail.value.toString())
	}

	/**通知修改提交 */
	function handleSubmit() {
		console.log({
			StartTime,
			EndTime,
			IntervalTimes,
			DayTimes
		})
		if (ConfId) {
			Taro.showLoading({
				title: "处理中..."
			})
			if (
				IntervalTimes != null &&
				IntervalTimes != undefined &&
				IntervalTimes != "" &&
				IntervalTimes >= 2
			) {
				uEditOrOpenReportConf({
					devReportConfId: String(ConfId),
					devReportStartTime: StartTime,
					devReportEndTime: EndTime,
					devReportIntervalTime: IntervalTimes,
					devReportTopLimit: DayTimes
				})
					.then(res => {
						if (res.result === "success") {
							Taro.showToast({
								title: title + "已修改",
								icon: "success",
								duration: 1000
							})
							onChange()
						}
						Taro.hideLoading()
					})
					.catch(err => {
						Taro.hideLoading()
					})
			} else {
				// Taro.showToast({
				// 	title: "间隔时段不能小于2小时,请修改后重新提交!",
				// 	icon: "warning",
				// 	duration: 1000
				// })
				Taro.hideLoading()
				Taro.showModal({
					title: "提示",
					content: "间隔时段不能小于2小时,请修改后重新提交!",
					success: function (res) {
						if (res.confirm) {
							console.log("用户点击确定")
						} else if (res.cancel) {
							console.log("用户点击取消")
						}
					}
				})
				setIntervalTimes("2")
			}
		}
	}
	/**通知开启 */
	function ReportOpen() {
		console.log({
			StartTime,
			EndTime,
			IntervalTimes,
			DayTimes
		})
		if (ConfId) {
			Taro.showLoading({
				title: "处理中..."
			})

			uEditOrOpenReportConf({
				devReportConfId: String(ConfId),
				devReportStartTime: StartTime,
				devReportEndTime: EndTime,
				devReportIntervalTime: IntervalTimes,
				devReportTopLimit: DayTimes
			})
				.then(res => {
					if (res.result === "success") {
						Taro.showToast({
							title: title + "已开启",
							icon: "success",
							duration: 1000
						})
						onChange()
					}
					Taro.hideLoading()
				})
				.catch(err => {
					Taro.hideLoading()
				})
		}
	}
	/**通知关闭 */
	function ReportClose() {
		if (ConfId) {
			Taro.showLoading({
				title: "处理中..."
			})

			uDisableReportConf({
				devReportConfId: String(ConfId)
			})
				.then(res => {
					if (res.result === "success") {
						Taro.showToast({
							title: title + "已关闭",
							icon: "success",
							duration: 1000
						})
						onChange()
					}
					Taro.hideLoading()
				})
				.catch(err => {
					Taro.hideLoading()
				})
		}
	}

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Setreport useEffect")
		setStartTime(conf.devReportStartTime || "")
		setEndTime(conf.devReportEndTime || "")
		setIntervalTimes(String(conf.devReportIntervalTime || 0))
		setDayTimes(String(conf.devReportTopLimit || 0))
		setIsOpen(conf.isOpen)
		setConfId(conf.devReportConfId)

		setIsDisabled(isManage !== "是" || conf.isOpen !== 1)
	}, [conf])

	// 微信订阅消息下发权限方法
	// const getWxSubscribeMessageAuthorityFunc = () => {
	// 	console.log(111)

	// 	// 模板ID1
	// 	const tempID1 = "gA6OmcTMNqbZy4ohveNNi4cSUY-6EdGoCs6uT1pzvNc"
	// 	// 设备型号ID
	// 	const modelID = "AumPHSraCOEfP-znzqEelw"
	// 	// 设备票据
	// 	// const snTicket = modelID + dayjs().format("ss")
	// 	// 设备序列号
	// 	// const sn = modelID + dayjs().format("mm")

	// 	modelID +
	// 		Taro.requestSubscribeMessage({
	// 			tmplIds: [tempID1],
	// 			// modelId: modelID,
	// 			// sn: sn,
	// 			// snTicket: snTicket,
	// 			fail: err => {
	// 				console.log(err)

	// 				Taro.showModal({
	// 					title: "提示",
	// 					content: "失败!",
	// 					success: function (res) {
	// 						if (res.confirm) {
	// 							console.log("用户点击确定")
	// 						} else if (res.cancel) {
	// 							console.log("用户点击取消")
	// 						}
	// 					}
	// 				})
	// 			},
	// 			success: () => {
	// 				Taro.showModal({
	// 					title: "提示",
	// 					content: "成功!",
	// 					success: function (res) {
	// 						if (res.confirm) {
	// 							console.log("用户点击确定")
	// 						} else if (res.cancel) {
	// 							console.log("用户点击取消")
	// 						}
	// 					}
	// 				})
	// 			}
	// 		})
	// }

	return (
		<View className="mb-64">
			<View className="hanzi text-16 text-x_text font-bold mb-14 px-16 flex justify-between items-center">
				<View>{title}</View>
				{subTitle ? subTitle : <View></View>}
			</View>
			{/* <View>
				<Button
					className="btn-max-w"
					plain
					type="primary"
					onClick={
						// 调用下发权限方法
						getWxSubscribeMessageAuthorityFunc
					}
				>
					下发权限
				</Button>
			</View> */}

			{/* {showOfficialAccounts ? (
				<View className="mb-14">
					<OfficialAccount></OfficialAccount>
				</View>
			) : null} */}

			<View className="bg-white px-24 flex items-center mb-14">
				<View className="">
					<View className="h-68 py-24 border-0 border-solid border-b-1 border-x_line pr-21">
						当前状态:
					</View>
					<View className="h-68 py-24 border-0 border-solid border-b-1 border-x_line pr-21">
						开始时间:
					</View>
					<View className="h-68 py-24 border-0 border-solid border-b-1 border-x_line pr-21">
						结束时间:
					</View>
					<View className="h-68 py-24 border-0 border-solid border-b-1 border-x_line pr-21">
						间隔时段(小时):
					</View>
					<View className="h-68 py-24">每天次数(最多):</View>
					{/* <Switch checked/> */}
				</View>
				<View className="flex-1">
					<View className="h-68 py-24 border-0 border-solid border-b-1 border-x_line pr-21">
						<View className="flex items-center gap-x-8">
							<Switch
								className="statusSwitch"
								checked={IsOpen === 1}
								onChange={handleIsOpenSwitchOnChange}
								disabled={isManage === "否" || !isManage}
							/>
							<Text className="text-12">
								{IsOpen === 1 ? "通知已开启" : "通知已关闭"}
							</Text>
						</View>
					</View>
					<View className="h-68 py-24 border-0 border-solid border-b-1 border-x_line pr-21">
						<Picker
							value={StartTime}
							mode="time"
							onChange={handleStartTimePickerOnChange}
							disabled={isDisabled}
						>
							<View className="flex items-center gap-x-8">
								<IconImg imgName="clock" width={32} height={32}></IconImg>
								{StartTime || "未设置"}
							</View>
						</Picker>
					</View>
					<View className="h-68 py-24 border-0 border-solid border-b-1 border-x_line pr-21">
						<Picker
							value={EndTime}
							mode="time"
							onChange={handleEndTimePickerOnChange}
							disabled={isDisabled}
						>
							<View className="flex items-center gap-x-8">
								<IconImg imgName="clock" width={32} height={32}></IconImg>
								{EndTime || "未设置"}
							</View>
						</Picker>
					</View>
					<View className="h-68 py-24 border-0 border-solid border-b-1 border-x_line pr-21">
						<Input
							value={IntervalTimes}
							type="number"
							placeholder="请输入"
							onInput={handleIntervalTimesInputOnChange}
							disabled={isDisabled}
						></Input>
					</View>
					<View className="h-68 py-24 pr-21">
						<Input
							value={DayTimes}
							type="number"
							placeholder="请输入"
							onInput={handleDayTimesInputOnChange}
							disabled={isDisabled}
						></Input>
					</View>
				</View>
			</View>
			<View className="px-16">
				<Button
					className={`h-48 rounded-6 ${
						IsOpen === 1 ? "bg-primary" : "bg-danger"
					} flex justify-center items-center`}
					onClick={handleSubmit}
					disabled={isDisabled}
				>
					<View className="hanzi text-16 text-white">
						{IsOpen === 1 ? "提交" : "未开启"}
					</View>
				</Button>
			</View>
		</View>
	)
}
